<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件绑定</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <input type="text" v-model="mytext">
        {{mytext}}

        <hr>
        <!-- isChecked是一个布尔值 -->
        <input type="text" v-model="username" v-model="isChecked"><br>
        <input type="checkbox">记住用户名

        <hr>
        <p>你喜欢的运动有哪些？</p>
        <!-- checkgroup是一个数字 -->
        <input type="checkbox" v-model="checkgroup" value="swimming">游泳
        <input type="checkbox" v-model="checkgroup" value="skating">滑冰
        <input type="checkbox" v-model="checkgroup" value="run">长跑
        <br>
        多选结果:{{checkgroup}}

        <hr>
        <!-- picked是一个普通单选字符串-->
        <p>你喜欢的开发语言有哪些？</p>
        <input type="radio" v-model="picked" value="php">php
        <input type="radio" v-model="picked" value="javascript">javascript
        <input type="radio" v-model="picked" value="java">java
        <br>
        单选结果:{{picked}}


    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                mytext: "",
                isChecked: false,
                checkgroup: [],
                picked: ""
            }
        })
    </script>

</body>

</html>